<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body{
			margin:0; 
			padding:0; 
			height:100%; 
			width: 100%;
		}
		#wrapper{
			background:#ddd;
			display:grid;
		}
		#mapdiv{
			margin:0; 
			padding:0;
			grid-row: 1 / 3;
		}
    </style>
	<!-- Change the name of the webpage into each city. -->
    <title>San Francisco</title>
	<script>
	//<!-- If there is only two scenic spot, delete the first "else if" part and change the condition of the second "else if" into "index === 2". -->
	function back(){
		if(index === 1){
            document.getElementById("content1")
                    .style.display= "";
            document.getElementById("photo1")
                    .style.display= "";
            document.getElementById("content2")
                    .style.display= "none";
            document.getElementById("photo2")
                    .style.display= "none";
			map.setCenter(lonLat1, zoom1);
			index++;
		}
		else if(index === 2){
            document.getElementById("content1")
                    .style.display= "none";
            document.getElementById("photo1")
                    .style.display= "none";
            document.getElementById("content2")
                    .style.display= "";
            document.getElementById("photo2")
                    .style.display= "";
			map.setCenter(lonLat2, zoom2);
			index = 1;
	}}
	
	<!-- If there is only two scenic spot, delete the first "else if" part and change the condition of the second "else if" into "index === 2". -->
	function forward(){
		if(index === 1){
			document.getElementById("content1")
					.style.display= "";
			document.getElementById("photo1")
					.style.display= "";
			document.getElementById("content2")
					.style.display= "none";
			document.getElementById("photo2")
					.style.display= "none";
			map.setCenter(lonLat1, zoom1);
			index = 2;
		}
		else if(index === 2){
            document.getElementById("content1")
                    .style.display= "none";
            document.getElementById("photo1")
                    .style.display= "none";
            document.getElementById("content2")
                    .style.display= "";
            document.getElementById("photo2")
                    .style.display= "";
            map.setCenter(lonLat2, zoom2);
			index--;
		}
	}
	</script>
</head>

<body bgcolor="#362619">

<table id ="top" width=100% height="110px" align="center" cellpadding="0" cellspacing="0" style="background:#362619">
  <tbody>
  <tr height=5%>
  </tr>
  <tr height=40%>
	<!-- Change the name of the headline of each city. -->
	<!-- p.s. "&nbsp;" means space here. -->
  	<td colspan="2" style="size:5px;color:#FFFFFF;font-family:lucida calligraphy;">&nbsp;&nbsp;San Francisco</td>
  </tr>
  <tr height=30%>
	<!-- Change the name of the brief introduction of each city. -->
	<td colspan="2" style="size:2px;color:#C5D5D5;font-family:lucida calligraphy;">&nbsp;&nbsp;&nbsp;This is the sixth stop of Phileas Fogg's tour.</td>
  </tr>
  <tr height=25%>
    <!-- Link the corresponding webpage address after "href=" --> <!-- This part should be finished by Jiazhe at last. -->
	<th width="77%"></th>
	<th width="8%" style="text-align:center"><a id="link1" href="Yokohama.html" style="size:2px;color:#C5D5D5;font-family:Calibri;"> LAST STOP </a></th>
	<th width="8%" style="text-align:center"><a id="link2" href="NewYork.html" style="size:2px;color:#C5D5D5;font-family:Calibri;"> NEXT STOP </a></th>
	<th width="7%" style="text-align:center"><a id="link3" href="../Main%20page.html  " style="size:2px;color:#C5D5D5;font-family:Calibri;">  RETURN  </a></th>
  </tr>
</table>

<div id="wrapper">
<div id="mapdiv" style="margin:0px; padding:0; background:#3E3D35; float:left; height:720px; width:100%; position:relative"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>
<script>
        map = new OpenLayers.Map("mapdiv");
        map.addLayer(new OpenLayers.Layer.OSM());

        //Set start centre point and zoom
		//For Suez, the first and final point is (32.446568, 30.593634), shift the center lonlat a little bit to show the kml point on the left.
        var lonLat1 = new OpenLayers.LonLat(-122.394096,37.7817)
            .transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
            );
        var zoom1=15;
        
		//Set the second centre point and zoom
		var lonLat2 = new OpenLayers.LonLat(-122.415544,37.779197)
				.transform(
					new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
					map.getProjectionObject() // to Spherical Mercator Projection
				);
		var zoom2=17;
		

		map.setCenter(lonLat1, zoom1);
		
		var kmllayer = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./kml/San Francisco.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        });
        
		map.addLayer(kmllayer); 

		var index = 2;
	
</script>

<div align="center" id="photoShow" style="margin:0; padding:0; background:#3E3D35; float:left; height:450px; width:700px; position:absolute;top:135px;left:900px;">
    <button id="back" style="width:58px; height:89px; background:url(./icon/1.png); float:right; position:absolute; top:43%; margin-top:1px; left:1%; margin-left:1px; border:none" onclick="back();"></button>
    <button id="forward" style="width:58px; height:89px; background:url(./icon/2.png); float:right; position:absolute; top:43%; margin-top:1px; right:1%; margin-right:1px; border:none" onclick="forward();"></button>
    <!--Change the src of each scenic spot. -->
	<img id="photo1" src="./Photo/South Park.jpg" style="width:700px;">
	<img id="photo2" src="./Photo/Hall Building.jpg" style="width:700px; display: none;">
</div>


<!-- Change the table height and to adjust the text window. -->
<table id ="content1" width="700px" height="220px" align="center" cellpadding="0" cellspacing="0" style="background:#3E3D35; position:absolute; top:585px; left:900px;" >
  <tbody>
  <tr height="10px"></tr>
  <tr>
	<td width="10px"></td>
	<!-- change the name of the name of each scenic spot. -->
	<!-- p.s. "</br>" means starting from the next line. -->
  	<td valign="top" width="170px" style="size:3px;color:#FFFFFF;font-family:Arial;">San Francisco South Park</td>
	<!-- change the introduction. -->
	<td valign="top" style="size:2px;color:#FFFFFF;font-family:Arial;">South Park is a small urban park and eponymous neighborhood in the larger South of Market neighborhood of San Francisco, California. The park was originally constructed in 1855 as the center of an exclusive residential community.
		The two halves of the South Park Street re-join at both ends of the park and continue for short, straight stretches before terminating at Second Street on one end and Third Street on the other. This creates a curved line of buildings, which gives the street and park an unusual enclosed, urban character. Local businesses and restaurants dot the street, as well as a large number of apartment buildings.
		</td>
    <td width="10px"></td>
  </tr>
</table>



<!-- Change the table height and to adjust the text window. -->
<table id ="content2" width="700px" height="160px" align="center" cellpadding="0" cellspacing="0" style="background:#3E3D35; position:absolute; top:585px; left:900px; display: none;" >
  <tbody>
  <tr height="10px"></tr>
  <tr>
	<td width="10px"></td>
	<!-- change the name of the name of each scenic spot. -->
	<!-- p.s. "</br>" means starting from the next line. -->
  	<td valign="top" width="170px" style="size:3px;color:#FFFFFF;font-family:Arial;">Hall Building</td>
	<!-- change the introduction. -->
	<td valign="top" style="size:2px;color:#FFFFFF;font-family:Arial;">San Francisco City Hall is the seat of government for the City and County of San Francisco, California. 
		Re-opened in 1915 in its open space area in the city's Civic Center, it is a Beaux-Arts monument to the City Beautiful movement that epitomized the high-minded American Renaissance of the 1880s to 1917. The present building replaced an earlier City Hall that was destroyed during the 1906 earthquake, which was two blocks from the present one. 
		</td>
    <td width="10px"></td>
  </tr>
</table>


</div>

</body>
</html>